<template>
  <el-container class="home-container">
    <!--    导航-->
    <el-header>
      <div>
        <span style="margin-left: 20px">
          <img
            src="../assets/ilogo.png"
            width="250px;"
            style="margin-left: -10px"
            height="100%;"
            alt
            srcset
          />
        </span>
      </div>
      <el-dropdown>
        <div class="block">
          <el-avatar
            :size="50"
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F17%2F09%2F22%2F6fe177dba57345ef4d98cd8bf0c76442.jpg&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641652973&t=1cdbf604632acdfeac5615a4d0ecab97"
            style="cursor: pointer"
          ></el-avatar>
        </div>
        <el-dropdown-menu slot="dropdown" trigger="click">
          <el-dropdown-item>
            <span type="danger" @click="toWelcome"
              ><span class="el-icon-house"></span> &nbsp;系统首页</span
            >
          </el-dropdown-item>

          <el-dropdown-item>
            <span type="danger" @click="getContact"
              ><span class="el-icon-ship"></span> &nbsp;交流讨论</span
            >
          </el-dropdown-item>

          <el-dropdown-item>
            <span type="danger" @click="logout"
              ><span class="el-icon-switch-button"></span> &nbsp;退出登入</span
            >
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!--主体-->
    <el-container style="height: 500px">
      <!--菜单-->
      <el-aside :width="isOpen == true ? '65px' : '200px'">
        <div class="toggle-btn" @click="toggleMenu">
          <span
            class="el-icon-star-off"
            :class="{ 'is-collapse': isOpen }"
          ></span>
        </div>
        <el-menu
          class="el-menu-vertical-demo"
          :collapse="isOpen"
          :router="true"
          :default-active="activePath"
          background-color="#001529"
          :collapse-transition="false"
          text-color="rgba(255,255,255,0.7)"
          unique-opened
          style=" border-right: solid 0px #fff;"
        >
          <MenuTree :menuList="this.menuList"></MenuTree>
        </el-menu>
      </el-aside>

      <!--右边主体-->
      <el-main v-loading="loading">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import MenuTree from "./MenuTree.vue"; //引进菜单模板

export default {
  data() {
    return {
      loading: true,
      activePath: "", //激活的路径
      isOpen: false,
      menuList: [
        {
          children: [
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "1-1",
              prentID: "1",
              menuName: "系统首页",
              url: "/welcome",
            },
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "1-2",
              prentID: "1",
              menuName: "用户管理",
              url: "/users",
            },
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "1-3",
              prentID: "1",
              menuName: "附件管理",
              url: "/attachments",
            },
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "1-4",
              prentID: "1",
              menuName: "菜单权限",
              url: "/menus",
            },
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "1-5",
              prentID: "1",
              menuName: "角色管理",
              url: "/roles",
            },
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "1-6",
              prentID: "1",
              menuName: "部门管理",
              url: "/departments",
            },
          ],
          icon: "icon iconfont el-icon-setting",
          id: "1",
          prentID: "0",
          menuName: "系统管理",
          url: "",
        },
        {
          children: [
            {
              children: [
                {
                  icon: "icon iconfont icon-shangpinliebiao",
                  id: "2-1-1",
                  prentID: "2-1",
                  menuName: "物资入库",
                  url: "/inStocks",
                },
                {
                  icon: "icon iconfont icon-shangpinliebiao",
                  id: "2-1-2",
                  prentID: "2-1",
                  menuName: "物资资料",
                  url: "/products",
                },
                {
                  icon: "icon iconfont icon-shangpinliebiao",
                  id: "2-1-3",
                  prentID: "2-1",
                  menuName: "物资类别",
                  url: "/productCategorys",
                },
                {
                  icon: "icon iconfont icon-shangpinliebiao",
                  id: "2-1-4",
                  prentID: "2-1",
                  menuName: "物资发放",
                  url: "/outStocks",
                },
                {
                  icon: "icon iconfont icon-shangpinliebiao",
                  id: "2-1-5",
                  prentID: "2-1",
                  menuName: "物资库存",
                  url: "/stocks",
                },
              ],
              icon: "icon iconfont icon-shangpinliebiao",
              id: "2-1",
              prentID: "2",
              menuName: "物资管理",
              url: "/users",
            },
            {
              children: [
                {
                  icon: "icon iconfont icon-shangpinliebiao",
                  id: "2-2-1",
                  prentID: "2-2",
                  menuName: "物资去处",
                  url: "/consumers",
                },
                {
                  icon: "icon iconfont icon-shangpinliebiao",
                  id: "2-2-2",
                  prentID: "2-2",
                  menuName: "物资来源",
                  url: "/suppliers",
                },
              ],
              icon: "icon iconfont icon-shangpinliebiao",
              id: "2-2",
              prentID: "2",
              menuName: "物资流向",
              url: "/users",
            },
          ],
          icon: "icon iconfont el-icon-goods",
          id: "2",
          prentID: "0",
          menuName: "业务管理",
          url: "/pm",
        },
        {
          children: [
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "3-1",
              prentID: "3",
              menuName: "全国疫情",
              url: "/map",
            },
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "3-2",
              prentID: "3",
              menuName: "健康打卡",
              url: "/health",
            },
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "3-3",
              prentID: "3",
              menuName: "疫情辟谣",
              url: "/rumors",
            },
          ],
          icon: "icon iconfont el-icon-loading",
          id: "3",
          prentID: "0",
          menuName: "健康报备",
          url: "",
        },
        {
          children: [
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "4-1",
              prentID: "4",
              menuName: "登入日志",
              url: "/loginLog",
            },
            {
              icon: "icon iconfont icon-shangpinliebiao",
              id: "4-2",
              prentID: "4",
              menuName: "操作日志",
              url: "/logs",
            },
          ],
          icon: "icon iconfont el-icon-camera",
          id: "4",
          prentID: "0",
          menuName: "日志管理",
          url: "",
        },
      ],
      userInfo: {},
    };
  },
  components: {
    MenuTree,
  },
  methods: {
     //回到首页
    toWelcome() {
      this.$router.push("/welcome");
    },
    //交流讨论
    getContact() {
      const w = window.open("about:blank");
      w.location.href = "https://www.bilibili.com/";
    },

    //退出
    logout() {
      this.$router.push("/");
    },
    /**
      加载菜单数据
     */
    async getMenuList() {
      const { data: res } = await this.$http.get("user/findMenu");
      if (res.code !== 200)
        return this.$message.error("获取菜单失败:" + res.msg);
       this.menuList = res.data;
    },
    /**
      获取用户信息
     */
    getUserInfo() {},
    /**
     * 菜单伸缩
     */
    toggleMenu() {
      this.isOpen = !this.isOpen;
    },

    /**
     * 点击交流
     */
  },
  mounted() {},
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
    // if(window.sessionStorage.getItem("activePath")==null){
    //   this.activePath='/welcome';
    // }
    this.getMenuList()
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
};
</script>

<style>
/* 为对应的路由跳转时设置动画效果 */

.el-header {
  background-color: #001529;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 19px;

  padding-left: 0px;
}
.el-aside {
  background-color: #001529;
}
.el-main {
  background-color: #eaedf1;
}
.home-container {
  width: 100%;
  height: 100% !important;
}
.toggle-btn {
  background-color: #2d8cf0 !important;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.is-collapse {
  transform: rotate(-90deg);
}
</style>
